<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 搜索条件 -->
    <div class="header-search single_line">
      <el-form ref="search_form" :model="search" :inline="true" label-width="0">
        <div class="form-area">
          <div class="search_view">
            <el-form-item>
              <el-input v-model="search.hxy_scl_name" placeholder="请选择学校" readonly @focus="schoolVisible = true" />
            </el-form-item>
            <div class="btn-area">
              <span class="spp-btn spp-btn-primary" @click="getBatchCardsnPaginateData()">搜索</span>
              <span class="spp-btn" @click="resetData()">重置</span>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content_view">
      <!-- 操作按鈕 -->
      <div class="main-header">
        <el-row :gutter="20">
          <el-col :span="4" class="left">卡内码</el-col>
          <el-col :span="20" class="right">
            <span v-if="auth.save != -1" class="spp-btn spp-btn-primary" @click="setBatchCardsnEditVisible()">新增批量处理任务</span>
          </el-col>
        </el-row>
      </div>
      <el-table ref="table" :data="batch_cardsn_paginate_data" :height="height-130" size="mini" stripe>
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="任务编号" prop="task_no" min-width="200" align="left" />
        <el-table-column label="文件名称" min-width="200" align="left">
          <template slot-scope="scope">
            <el-button type="text" @click="getBatchDownload(scope.row.task_id)">{{ scope.row.file_ori_name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="200" align="left">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time ? formatDateTime(scope.row.create_time) : '--' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="完成时间" min-width="200" align="left">
          <template slot-scope="scope">
            <div>{{ scope.row.finish_time  ? formatDateTime(scope.row.finish_time ) : '--' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="create_oper_name" min-width="150" align="left" />
        <el-table-column label="状态" min-width="150" align="left">
          <template slot-scope="scope">
            <div>{{ status_flag_dic[scope.row.status_flag] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="总条数" prop="total_num" min-width="100" align="left" />
        <el-table-column label="成功数" prop="success_num" min-width="100" align="left" />
        <el-table-column label="失败数" prop="fail_num" min-width="100" align="left" />
        <el-table-column label="操作" min-width="150" fixed="right" align="left">
          <template slot-scope="scope">
            <el-button type="text" @click="getBatchExportFail(scope.row.task_id)">导出错误列表</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="page_size" @pagination="getBatchCardsnPaginateData" />
    </div>
    <!-- 选择学校 -->
    <el-dialog title="选择学校" :visible.sync="schoolVisible" :close-on-click-modal="false" width="720px" class="school_view">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <SelectSchool @selectSchool="selectSchool" />
      </el-scrollbar>
    </el-dialog>
    <!-- 新增批量处理任务 -->
    <el-dialog title="新增批量处理任务" :append-to-body="true" :visible.sync="batchCardsnEditVisible" width="500px" :close-on-click-modal="false">
      <div style="width: 85%;margin: auto;">
        <el-form ref="batch_update_edit_form" label-width="80px" :model="batch_update_edit_form">
          <el-upload
            ref="upload"
            class="upload-demo"
            accept=".xlsx, .xls"
            :action="upload_url"
            :data="batch_upload_form"
            :auto-upload="false"
            :on-success="upload_success"
            :on-error="upload_error"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <a class="spp-btn" :href="tpl_url">下载模板</a>
          </el-upload>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="batchCardsnEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchCardsnSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { paginate, save, exportFail, download } from '@/api/pajx/pajx/batch_cardsn'
import { formatDateTime } from '@/utils/index'
import { getBaseURL, getToken, getAppId, nowTime, getSign } from '@/utils/auth'
import { mapState } from 'vuex'
import SelectSchool from '@/components/SelectSchool'
import Pagination from '@/components/Pagination'
export default {
  name: 'PajxBatchCardsn',
  components: { SelectSchool, Pagination },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      status_flag_dic: {
        '0': '作废',
        '1': '排队',
        '2': '处理中',
        '3': '处理成功',
        '4': '处理失败',
        '5': '有错误信息'
      },
      search: {
        hxy_scl_name: '',
        hxy_scl_id: ''
      },
      schoolVisible: false,
      page: 1,
      page_size: 20,
      total: 0,
      batch_cardsn_paginate_data: [],
      batchCardsnEditVisible: false,
      upload_url: getBaseURL() + '/api/upload/pajx',
      tpl_url: getBaseURL() + '/tpl/update_cardsn_stu.xlsx',
      batch_upload_form: {
        upload_code: 'batch_update_cardsn'
      },
      batch_update_edit_form: {
        task_type: '',
        hxy_scl_id: '',
        file_ori_name: '',
        file_path: ''
      }
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {},
  methods: {
    formatDateTime: formatDateTime,
    // 获取按钮权限
    permissionAuth() {
      this.auth.save = this.permission.indexOf('/api/pajx/batch/save')
    },
    // 重置搜索选项
    resetData() {
      Object.assign(this.$data.search, this.$options.data().search)
      this.search.hxy_scl_id = ''
      this.search.hxy_scl_name = ''
    },
    // 选择学校
    selectSchool(data) {
      this.schoolVisible = false
      this.search.hxy_scl_id = data.hxy_scl_id
      this.search.hxy_scl_name = data.scl_name
      this.batch_update_edit_form.hxy_scl_id = data.hxy_scl_id
      this.getBatchCardsnPaginateData()
    },
    // 获取列表数据
    getBatchCardsnPaginateData() {
      if(!this.search.hxy_scl_id){
        this.$message({
          message: '请选选择学校',
          type: 'warning'
        })
        return
      }
      paginate(this.search, this.page, this.page_size).then(response => {
        this.batch_cardsn_paginate_data = response.data.list
        this.total = response.data.totalRow
      })
    },
    setBatchCardsnEditVisible() {
      if(!this.search.hxy_scl_id){
        this.$message({
          message: '请选选择学校',
          type: 'warning'
        })
        return
      }
      this.batchCardsnEditVisible = true
    },
    // 上传文件
    batchCardsnSubmit() {
      if (this.$refs.upload.uploadFiles.length === 0) {
        this.$message.error('请选择文件')
        return
      }
      this.batch_update_edit_form.file_ori_name = this.$refs.upload.uploadFiles[0].name
      this.batch_upload_form.app_id = getAppId()
      this.batch_upload_form.timestamp = nowTime()
      this.batch_upload_form.token = getToken()
      this.batch_upload_form.sign = getSign(this.batch_upload_form)
      this.$refs.upload.submit()
    },
    // 上传成功
    upload_success(response, file, fileList) {
      if (response.status !== 200) {
        this.$message.error(response.message)
        this.$refs.upload.clearFiles()
        delete this.batch_upload_form.sign
      } else {
        delete this.batch_upload_form.sign
        this.batch_update_edit_form.file_path = response.data.upload_path
        this.batchUpdateEditSubmit()
        this.$refs.upload.clearFiles()
      }
    },
    // 上传失败
    upload_error() {
      this.$message.error('网络错误')
    },
    // 新增批量处理任务
    batchUpdateEditSubmit() {
      this.batch_update_edit_form.task_type = this.batch_upload_form.upload_code
      save(this.batch_update_edit_form).then(response => {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.batchCardsnEditVisible = false
        this.getBatchCardsnPaginateData()
      })
    },
    // 下载处理表格
    getBatchDownload(task_id) {
      const url = download(task_id)
      window.open(url)
    },
    // 导出错误列表
    getBatchExportFail(task_id) {
      const url = exportFail(task_id)
      window.open(url)
    }
  },
  created() {
    this.permissionAuth()
  }
}
</script>
<style lang="scss">
</style>
